<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>长虹[联合运营平台后台管理系统]</title>
		<!-- 全局CSS 开始-->
		<link href="../css/global/bootstrap.min.css" rel="stylesheet" />
		<link href="../css/global/font-awesome.min.css" rel="stylesheet" />
		<link href="../css/global/simple-line-icons.css" rel="stylesheet" />
		<link href="../css/global/animate.css" rel="stylesheet" />
		<link href="../css/global/style.css" rel="stylesheet" />
		<link href="../js/plugins/pace/pace.css" rel="stylesheet" />
		<!-- 全局CSS 结束-->
		<!-- 页面CSS 开始-->
		<!-- 页面CSS 结束-->
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="../js/bootstrap/html5shiv.min.js"></script>
		<script src="../js/bootstrap/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="wrapper wrapper-content animated fadeInUp">
			<div class="row page-heading">
				<h4><i class="fa fa-flask"></i>  UI组件 / 表格Table</h4>
			</div>
			<div class="row">
                <div class="col-md-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>常用数据表格</h5>
                            <div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
                        </div>
                        <div class="ibox-content">
                        	<p>将<code>.table</code> 元素包裹在 <code>.table-responsive</code> 元素内，更添加了“紧缩表格”<code>.table-condensed</code>，“条纹状”<code>.table-striped</code>，“边框”<code>.table-bordered</code>，“鼠标悬浮”<code>.table-hover</code>，“可编辑checkbox”和“fancybox”等效果</p>
                        	<div class="table-responsive">
								<div class="row mtl mbm">
				                    <div class="col-sm-2">
					                    <span>每页</span>
					                    <select class="input-xs form-control inline">
					                        <option value="0">5</option>
					                        <option value="1">10</option>
					                        <option value="2">20</option>
					                        <option value="3">40</option>
					                        <option value="4">全部</option>
					                    </select>
					                    <span>条信息</span>
				                    </div>
				                    <div class="col-sm-3">
				                        <div data-toggle="buttons" class="btn-group">
				                            <label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options" /> 筛选1 </label>
				                            <label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options" /> 筛选2 </label>
				                            <label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options" /> 筛选3 </label>
				                        </div>
				                    </div>
				                    <div class="col-sm-3 pull-right">
				                        <div class="input-group"><input type="text" placeholder="搜索" class="input-sm form-control" /> <span class="input-group-btn">
				                        	<button type="button" class="btn btn-sm btn-primary"> <i class="fa fa-search"></i></button> </span></div>
				                    </div>
				                </div>
								<table class="table table-condensed table-striped table-bordered table-hover table-view-1" >
								<thead>
								<tr>
									<th class="table-checkbox"><input type="checkbox" id="checkAll" class="i-checks" /></th>
									<th>编号</th>
									<th>主题名称</th>
									<th>创建日期</th>
									<th>最后修改</th>
									<th>创建人</th>
									<th>商品绑定</th>
									<th>背景海报</th>
									<th>状态</th>
									<th>销售统计</th>
									<th>操作</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td><input type="checkbox" class="i-checks" /></td>
									<td>1234</td>
									<td><a href="#">全家露营季</a></td>
									<td>2014-3-24<br />23:23:23</td>
									<td>2014-3-24<br />23:23:23</td>
									<td>创建：<a href="#">用户A</a><br />最后修改：<a href="#">用户B</a></td>
									<td>6件<br />已过期2件</td>
									<td>
										<a class="fancybox" href="../images/example_image.jpg" title="example-image.jpg">
											<img src="../images/example_image_thumb.jpg" alt="..." class="img-rounded img-responsive" />
										</a>
									</td>
									<td align="center"><span class="badge badge-success">在线</span></td>
									<td>已售：21件<br />金额：23445元</td>
									<td>
										<button type="button" class="btn btn-primary btn-xs">编辑</button>
										<button type="button" class="btn btn-success btn-xs">预览</button>
										<button type="button" class="btn btn-danger btn-xs">删除</button>
									</td>
								</tr>
								<tr>
									<td><input type="checkbox" class="i-checks" /></td>
									<td>1234</td>
									<td><a href="#">全家露营季</a></td>
									<td>2014-3-24<br />23:23:23</td>
									<td>2014-3-24<br />23:23:23</td>
									<td>创建：<a href="#">用户A</a><br />最后修改：<a href="#">用户B</a></td>
									<td>6件<br />已过期2件</td>
									<td>
										<a class="fancybox" href="../images/example_image.jpg" title="example-image.jpg">
											<img src="../images/example_image_thumb.jpg" alt="..." class="img-rounded img-responsive" />
										</a>
									</td>
									<td align="center"><span class="badge badge-success">在线</span></td>
									<td>已售：21件<br />金额：23445元</td>
									<td>
										<button type="button" class="btn btn-primary btn-xs">编辑</button>
										<button type="button" class="btn btn-success btn-xs">预览</button>
										<button type="button" class="btn btn-danger btn-xs">删除</button>
									</td>
								</tr>
								<tr>
									<td><input type="checkbox" class="i-checks" /></td>
									<td>1234</td>
									<td><a href="#">全家露营季</a></td>
									<td>2014-3-24<br />23:23:23</td>
									<td>2014-3-24<br />23:23:23</td>
									<td>创建：<a href="#">用户A</a><br />最后修改：<a href="#">用户B</a></td>
									<td>6件<br />已过期2件</td>
									<td>
										<a class="fancybox" href="../images/example_image.jpg" title="example-image.jpg">
											<img src="../images/example_image_thumb.jpg" alt="..." class="img-rounded img-responsive" />
										</a>
									</td>
									<td align="center"><span class="badge badge-warning">审核中</span></td>
									<td>已售：21件<br />金额：23445元</td>
									<td>
										<button type="button" class="btn btn-primary btn-xs">编辑</button>
										<button type="button" class="btn btn-success btn-xs">预览</button>
										<button type="button" class="btn btn-danger btn-xs">删除</button>
									</td>
								</tr>
								<tr>
									<td><input type="checkbox" class="i-checks" /></td>
									<td>1234</td>
									<td><a href="#">全家露营季</a></td>
									<td>2014-3-24<br />23:23:23</td>
									<td>2014-3-24<br />23:23:23</td>
									<td>创建：<a href="#">用户A</a><br />最后修改：<a href="#">用户B</a></td>
									<td>6件<br />已过期2件</td>
									<td>
										<a class="fancybox" href="../images/example_image.jpg" title="example-image.jpg">
											<img src="../images/example_image_thumb.jpg" alt="..." class="img-rounded img-responsive" />
										</a>
									</td>
									<td align="center"><span class="badge badge-danger">在线</span></td>
									<td>已售：21件<br />金额：23445元</td>
									<td>
										<button type="button" class="btn btn-primary btn-xs">编辑</button>
										<button type="button" class="btn btn-success btn-xs">预览</button>
										<button type="button" class="btn btn-danger btn-xs">删除</button>
									</td>
								</tr>
								<tr>
									<td><input type="checkbox" class="i-checks" /></td>
									<td>1234</td>
									<td><a href="#">全家露营季</a></td>
									<td>2014-3-24<br />23:23:23</td>
									<td>2014-3-24<br />23:23:23</td>
									<td>创建：<a href="#">用户A</a><br />最后修改：<a href="#">用户B</a></td>
									<td>6件<br />已过期2件</td>
									<td>
										<a class="fancybox" href="../images/example_image.jpg" title="example-image.jpg">
											<img src="../images/example_image_thumb.jpg" alt="..." class="img-rounded img-responsive" />
										</a>
									</td>
									<td align="center"><span class="badge badge-default">下线</span></td>
									<td>已售：21件<br />金额：23445元</td>
									<td>
										<button type="button" class="btn btn-primary btn-xs">编辑</button>
										<button type="button" class="btn btn-success btn-xs">预览</button>
										<button type="button" class="btn btn-danger btn-xs">删除</button>
									</td>
								</tr>
								</tbody>
								</table>
								<div class="row">
									<div class="col-sm-6">
										显示 1 到 5 条 ，总共 10 条信息
									</div>
									<div class="col-sm-6 pull-right">
										<div class="table-pagination">
											<ul class="pagination">
											  <li class="disabled"><a href="#">上一页</a></li>
											  <li><a href="#">1</a></li>
											  <li><a href="#">2</a></li>
											  <li><a href="#">3</a></li>
											  <li><a href="#">4</a></li>
											  <li><a href="#">5</a></li>
											  <li><a href="#">下一页</a></li>
											</ul>
										</div>
									</div>
								</div>
						</div>
                        </div>
                    </div>
                </div>

            </div>
			<div class="row">
                <div class="col-md-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>基本实例</h5>
                        <div class="ibox-tools">
							<a class="collapse-link">
								<i class="fa fa-chevron-up"></i>
							</a>
							<a class="close-link">
								<i class="fa fa-times"></i>
							</a>
						</div>
                    </div>
                    <div class="ibox-content">
                    	<p>为任意 <code>&lt;table&gt;</code> 标签添加 <code>.table</code> 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。</p>
                    	<table class="table">
					      <thead>
					        <tr>
					          <th>#</th>
					          <th>First Name</th>
					          <th>Last Name</th>
					          <th>Username</th>
					        </tr>
					      </thead>
					      <tbody>
					        <tr>
					          <td>1</td>
					          <td>Mark</td>
					          <td>Otto</td>
					          <td>@mdo</td>
					        </tr>
					        <tr>
					          <td>2</td>
					          <td>Jacob</td>
					          <td>Thornton</td>
					          <td>@fat</td>
					        </tr>
					        <tr>
					          <td>3</td>
					          <td>Larry</td>
					          <td>the Bird</td>
					          <td>@twitter</td>
					        </tr>
					      </tbody>
					    </table>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>条纹状表格</h5>
                        <div class="ibox-tools">
							<a class="collapse-link">
								<i class="fa fa-chevron-up"></i>
							</a>
							<a class="close-link">
								<i class="fa fa-times"></i>
							</a>
						</div>
                    </div>
                    <div class="ibox-content">
                    	<p>通过 <code>.table-striped</code> 类可以给 <code>&lt;tbody&gt;</code> 之内的每一行增加斑马条纹样式。</p>
                    	<table class="table table-striped">
					      <thead>
					        <tr>
					          <th>#</th>
					          <th>First Name</th>
					          <th>Last Name</th>
					          <th>Username</th>
					        </tr>
					      </thead>
					      <tbody>
					        <tr>
					          <td>1</td>
					          <td>Mark</td>
					          <td>Otto</td>
					          <td>@mdo</td>
					        </tr>
					        <tr>
					          <td>2</td>
					          <td>Jacob</td>
					          <td>Thornton</td>
					          <td>@fat</td>
					        </tr>
					        <tr>
					          <td>3</td>
					          <td>Larry</td>
					          <td>the Bird</td>
					          <td>@twitter</td>
					        </tr>
					      </tbody>
					    </table>
                    </div>
                </div>
            </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>带边框的表格</h5>
                            <div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
                        </div>
                        <div class="ibox-content">
                        	<p>添加 <code>.table-bordered</code> 类为表格和其中的每个单元格增加边框。</p>
                        	<table class="table table-bordered">
						      <thead>
						        <tr>
						          <th>#</th>
						          <th>First Name</th>
						          <th>Last Name</th>
						          <th>Username</th>
						        </tr>
						      </thead>
						      <tbody>
						        <tr>
						          <td rowspan="2">1</td>
						          <td>Mark</td>
						          <td>Otto</td>
						          <td>@mdo</td>
						        </tr>
						        <tr>
						          <td>Mark</td>
						          <td>Otto</td>
						          <td>@TwBootstrap</td>
						        </tr>
						        <tr>
						          <td>2</td>
						          <td>Jacob</td>
						          <td>Thornton</td>
						          <td>@fat</td>
						        </tr>
						        <tr>
						          <td>3</td>
						          <td colspan="2">Larry the Bird</td>
						          <td>@twitter</td>
						        </tr>
						      </tbody>
						    </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>鼠标悬停效果  </h5>
                            <div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
                        </div>
                        <div class="ibox-content">
                        	<p>通过添加 <code>.table-hover</code> 类可以让 <code>&lt;tbody&gt;</code>中的每一行对鼠标悬停状态作出响应。</p>
                        	<table class="table table-hover">
						      <thead>
						        <tr>
						          <th>#</th>
						          <th>First Name</th>
						          <th>Last Name</th>
						          <th>Username</th>
						        </tr>
						      </thead>
						      <tbody>
						        <tr>
						          <td>1</td>
						          <td>Mark</td>
						          <td>Otto</td>
						          <td>@mdo</td>
						        </tr>
						        <tr>
						          <td>2</td>
						          <td>Jacob</td>
						          <td>Thornton</td>
						          <td>@fat</td>
						        </tr>
						        <tr>
						          <td>3</td>
						          <td colspan="2">Larry the Bird</td>
						          <td>@twitter</td>
						        </tr>
						      </tbody>
						    </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>紧缩表格</h5>
                            <div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
                        </div>
                        <div class="ibox-content">
                        	<p>通过添加 <code>.table-condensed</code> 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。</p>
                        	<table class="table table-condensed">
						      <thead>
						        <tr>
						          <th>#</th>
						          <th>First Name</th>
						          <th>Last Name</th>
						          <th>Username</th>
						        </tr>
						      </thead>
						      <tbody>
						        <tr>
						          <td>1</td>
						          <td>Mark</td>
						          <td>Otto</td>
						          <td>@mdo</td>
						        </tr>
						        <tr>
						          <td>2</td>
						          <td>Jacob</td>
						          <td>Thornton</td>
						          <td>@fat</td>
						        </tr>
						        <tr>
						          <td>3</td>
						          <td colspan="2">Larry the Bird</td>
						          <td>@twitter</td>
						        </tr>
						      </tbody>
						    </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>状态类</h5>
                            <div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
                        </div>
                        <div class="ibox-content">
                        	<p>通过这些状态类可以为行或单元格设置颜色。</p>
                        	<table class="table">
						      <thead>
						        <tr>
						          <th>#</th>
						          <th>Column heading</th>
						          <th>Column heading</th>
						          <th>Column heading</th>
						        </tr>
						      </thead>
						      <tbody>
						        <tr class="active">
						          <td>1</td>
						          <td>Column content</td>
						          <td>Column content</td>
						          <td>Column content</td>
						        </tr>
						        <tr>
						          <td>2</td>
						          <td>Column content</td>
						          <td>Column content</td>
						          <td>Column content</td>
						        </tr>
						        <tr class="success">
						          <td>3</td>
						          <td>Column content</td>
						          <td>Column content</td>
						          <td>Column content</td>
						        </tr>
						        <tr>
						          <td>4</td>
						          <td>Column content</td>
						          <td>Column content</td>
						          <td>Column content</td>
						        </tr>
						        <tr class="info">
						          <td>5</td>
						          <td>Column content</td>
						          <td>Column content</td>
						          <td>Column content</td>
						        </tr>
						        <tr>
						          <td>6</td>
						          <td>Column content</td>
						          <td>Column content</td>
						          <td>Column content</td>
						        </tr>
						        <tr class="warning">
						          <td>7</td>
						          <td>Column content</td>
						          <td>Column content</td>
						          <td>Column content</td>
						        </tr>
						        <tr>
						          <td>8</td>
						          <td>Column content</td>
						          <td>Column content</td>
						          <td>Column content</td>
						        </tr>
						        <tr class="danger">
						          <td>9</td>
						          <td>Column content</td>
						          <td>Column content</td>
						          <td>Column content</td>
						        </tr>
						      </tbody>
						    </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>响应式表格</h5>
                            <div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
                        </div>
                        <div class="ibox-content">
                        	<p>将任何 <code>.table</code> 元素包裹在 <code>.table-responsive</code> 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）增加水平滚动条。当屏幕大于 768px 宽度时，水平滚动条消失。</p>
                        	<div class="table-responsive">
						      <table class="table">
						        <thead>
						          <tr>
						            <th>#</th>
						            <th>Table heading</th>
						            <th>Table heading</th>
						            <th>Table heading</th>
						            <th>Table heading</th>
						            <th>Table heading</th>
						            <th>Table heading</th>
						          </tr>
						        </thead>
						        <tbody>
						          <tr>
						            <td>1</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						          </tr>
						          <tr>
						            <td>2</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						          </tr>
						          <tr>
						            <td>3</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						            <td>Table cell</td>
						          </tr>
						        </tbody>
						      </table>
						    </div>
                        </div>
                    </div>
                </div>

            </div>
		</div>
		<!-- 全局js 开始-->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap/bootstrap.min.js"></script>
		<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="../js/custom/custom.js"></script>
		<script src="../js/plugins/pace/pace.min.js"></script>
		<!-- 全局js 结束-->
		<!-- 页面js 开始-->
		<!-- iframeResizer -->
		<!-- <script src="../js/plugins/iframeResizer/iframeResizer.contentWindow.min.js"></script> -->

		<!-- fancybox -->
		<script src="../js/plugins/fancybox/jquery.fancybox.js"></script>
		<!-- 页面js 结束-->
	</body>
</html>